<template>
	<view class="page">
		<comHead  :datas="datasObj">
			<template #headerContent>
				<!-- 固定位置 -->
				<view class="head pd-30" style="height: 422rpx; padding-bottom: 20rpx;">
					<view class="productItem pd-20">
						<view class="flex">
							<view class="total ft flex-center">
								({{countData.un_use_count+countData.use_count+countData.expire_count}})优惠券</view>
							<view class="ft-24 c-red ml-10">本单可减-￥{{productInfo.reduce_price}}</view>
						</view>
						<view class="flex mt-20">
							<view class="left" style="flex-shrink: 0;">
								<image style="border-radius: 40rpx;" class="img wh-100" mode="aspectFill"
									:src="productInfo.cover">
								</image>
							</view>
							<view class="right ml-20">
								<view style="width: 488rpx;" class="ft-lue ft ft-28 fw-800">{{productInfo.name}}</view>
								<view style="width: 488rpx;" class="ft-lue ft c-99 mt-10"><template
										v-for="(tag, index) in productInfo.tags" :key="index"><template
											v-if="index===productInfo.tags.length-1">{{ tag.name }}</template><template
											v-else> {{tag.name+" |  " }}</template>
									</template></view>
								<view class="flex-bwt mt-10">
									<view class="flex" style="align-items: flex-end;">
										<view class="ft fw-800">￥</view>
										<view class="ft-num fw-900">{{productInfo.new_price}}</view>
										<view class="ft fw-800">元/券后办理花费</view>
									</view>
									<view class="flex-center c-ff ft btnA" @click="goDetail(productInfo)">去使用</view>
								</view>
							</view>
						</view>
					</view>
					<view class="flex">
						<view class="filter-cate-name flex-center" v-for="(item, index) in tabArray" :key="index"
							:class="{ active: currentTab === index }" @click="selectTab(index)">
							{{ item.desc }}({{ item.num }})
						</view>
					</view>
				</view>
			</template>
		</comHead>
		<view class="pd-30" style="padding-top: 0;">
			<view class="coupon-list">
				<view class="coupon-item" :class="{'is-del':item.isDel==1,'mt-20':index>0}"
					v-for="(item,index) in couponList" :key="item.id">
					<view @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" :data-index="index">
						<view class="quanItem flex">
							<view class="arrow">
								<view class="tip ft ft-20 flex-center c-ff">{{ item.preferential_name }}</view>
								<view class="mt-40 flex-center">
									<view>
										<view class="ft-num ft-32 text_center">{{item.currency_symbol}}{{ item.reduce }}
										</view>
										<view class="ft ft-22 text_center">{{ item.type_name }}</view>
									</view>
								</view>
							</view>
							<view class="right pd-20 flex">
								<image class="expire-icon"
									src="https://cdn.oss.bon-top.cn/static_bc/images/expire_icon.png" mode="widthFix"
									v-if="item.status=='is_expire' || item.status=='is_del'"></image>
								<image class="expire-icon"
									src="https://cdn.oss.bon-top.cn/static_bc/images/used_icon.png" mode="widthFix"
									v-if="item.status=='is_use'"></image>
								<view style="width: 100%;">
									<view class="ft fw-800" v-if="item.is_stackable===1">部分商品可用（可叠加）</view>
									<view class="ft fw-800" v-else>部分商品可用（同类型券不可叠加）</view>
									<view class="ft c-99 mt-20">{{item.start_time}}~{{item.end_time}}</view>
									<view class="flex-bwt mt-10">
										<view class="flex" @click="item.isOpen=item.isOpen==1?0:1">
											<view class="ft c-99">使用说明</view>
											<image class="down-icon" :class="{active:item.isOpen==1}" mode="widthFix"
												src="https://cdn.oss.bon-top.cn/static_bc/images/up_down.png"></image>
										</view>
										<view class="flex-center c-ff ft btnA" @click="goDetail(item.product_info)"
											v-if="item.status=='un_use'">去使用</view>
										<view class="flex-center c-ff ft btnA disable"
											v-else-if="item.status=='is_use'">已使用
										</view>
										<view class="flex-center c-ff ft btnA disable"
											v-else-if="item.status=='is_expire'">
											去使用</view>
										<view class="flex-center c-ff ft btnA disable"
											v-else-if="item.status=='is_del'">已删除
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="des" v-if="item.isOpen==1">
							<view class="des-item" v-for="(v,k) in item.des" :key="k">{{k+1}}、{{v}}</view>
						</view>
					</view>
					<view class="flex-center del-btn" v-if="item.isDel==1" @click="delCoupon(item.id,index)">删除</view>
				</view>
				<view class="com-empty" v-if="couponList.length==0">暂无数据</view>
			</view>
		</view>
		<view style="height: 68rpx;"></view>
	</view>
</template>

<script setup lang="js">
	import {
		ref,
		reactive
	} from "vue";
	import {
		utils
	} from '@/utils/utils.js';
	import {
		api
	} from '@/utils/api.js';
	import {
		onLaunch,
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";

	import comHead from '@/components/comHead.vue';
	let datasObj = reactive({
		title: '项目优惠券',
		img: '',
		color: '#FFFFFF',
		direction: '',
		scrollTop: 0,
		noBack: false,
		height: 510
	})

	const type = ref(1)

	const tabArray = ref([{
			desc: '未使用',
			num: 0
		}, {
			desc: '已使用',
			num: 0
		},
		{
			desc: '已失效',
			num: 0
		}
	]);

	const tag = ref(1)
	const changeTag = () => {
		tag.value = tag.value == 1 ? 2 : 1
		isInit.value = 1
		reloadData()
	}

	const currentTab = ref(0);
	const selectTab = (index) => {
		currentTab.value = index;
		reloadData()
	};

	const checkProduct = (id) => {
		uni.navigateTo({
			url: `/subpackage/userCoupon/product?id=${id}`,
		});
	}


	const reloadData = () => {
		couponPage.value = 1
		couponList.value = []
		couponLoading.value = true
		getCouponListData()
	}

	//获取列表
	const couponPage = ref(1)
	const couponList = ref([])
	const couponLoading = ref(true)
	const getCouponListData = () => {
		if (!couponLoading.value) {
			return
		}
		uni.showLoading()
		couponLoading.value = false
		utils
			.request(
				api.getCouponList, {
					page: couponPage.value,
					pageSize: 10,
					type: currentTab.value + 1,
					tag: tag.value,
					product_id: productId.value
				},
				"get"
			)
			.then((res) => {
				if (isInit.value == 1) {
					productInfo.value = res.data.countData.productInfo
					countData.value = res.data.countData
					tabArray.value[0].num = res.data.countData.un_use_count
					tabArray.value[1].num = res.data.countData.use_count
					tabArray.value[2].num = res.data.countData.expire_count
					isInit.value = 0
				}
				couponPage.value++
				if (res.data.items.length > 0) {
					couponList.value = couponList.value.concat(res.data.items)
				}
				if (couponPage.value <= res.data.pageInfo.totalPage) {
					couponLoading.value = true
				}
				uni.hideLoading()
			});
	};
	onReachBottom(() => {
		getCouponListData()
	})

	const isInit = ref(1)
	const productId = ref('')
	const productInfo = ref({})
	const countData = ref({})
	onLoad((options) => {
		if (options.id) {
			productId.value = options.id
			getCouponListData()
		}
	})

	const goDetail = (info) => {
		if (info) {
			uni.navigateTo({
				url: `/subpackage/immigration/immigration?id=${info.id}`,
			});
		} else {
			uni.reLaunch({
				url: '/pages/index/index',
			})
		}
	};

	const delCoupon = (id, index) => {
		utils
			.request(
				api.deleteCoupon, {
					id: id
				},
				"post"
			)
			.then((res) => {
				reloadData()
			});
	}

	const angle = (start, end) => {
		var _X = end.X - start.X,
			_Y = end.Y - start.Y
		//返回角度 /Math.atan()返回数字的反正切值
		return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
	}

	const startX = ref('')
	const startY = ref('')
	const touchStart = (e) => {
		if (currentTab.value != 0) {
			return
		}
		couponList.value.forEach((v, k) => {
			if (v.isTouchMove) {
				couponList.value[k].isTouchMove = false
			}
		})
		startX.value = e.changedTouches[0].clientX
		startY.value = e.changedTouches[0].clientY
	}

	const touchMove = (e) => {
		if (currentTab.value != 0) {
			return
		}
		var index = e.currentTarget.dataset.index
		const touchMoveX = e.changedTouches[0].clientX
		const touchMoveY = e.changedTouches[0].clientY
		const angleData = angle({
			X: startX.value,
			Y: startY.value
		}, {
			X: touchMoveX,
			Y: touchMoveY
		});
		couponList.value.forEach((v, k) => {
			couponList.value[k].isTouchMove = false
			//滑动超过30度角 return
			if (Math.abs(angleData) > 30) return;
			if (k == index) {
				if (touchMoveX > startX.value) //右滑
					couponList.value[k].isTouchMove = false
				else //左滑
					couponList.value[k].isTouchMove = true
			}
		})
	}

	const touchEnd = (e) => {
		if (currentTab.value != 0) {
			return
		}
		if (e.changedTouches.length == 1) {
			//手指移动结束后触摸点位置的X坐标
			var endX = e.changedTouches[0].clientX;
			//触摸开始与结束，手指移动的距离
			var disX = startX.value - endX;
			var delBtnWidth = 108;
			//如果距离小于删除按钮的1/2，不显示删除按钮
			var index = e.currentTarget.dataset.index;
			couponList.value[index].isDel = disX > delBtnWidth / 2 ? 1 : 0
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background: #FFFFFF;
	}

	.head {
		.cate-name {
			background: #F8F8F8;
			border-radius: 20rpx;
			padding: 16rpx 20rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			color: #666666;
			margin-right: 20rpx;
		}

		.cate-name.active {
			background: #DBF046;
			color: #333333;
		}

		.switch {
			background: linear-gradient(180deg, #FBFFDF 0%, #FFFFFF 100%);
			border-radius: 20rpx;
			padding: 10rpx 20rpx;
			box-sizing: border-box;

			.icon {
				margin-left: 4rpx;
				width: 22rpx;
				height: 22rpx;
			}
		}

		.filter-cate-name {
			margin-top: 20rpx;
			margin-right: 20rpx;
			padding: 12rpx 20rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 34rpx;
			border: 2rpx solid #F1F1F1;
			font-size: 24rpx;
			color: #666666;
		}

		.filter-cate-name.active {
			border: none;
			background: #333333;
			color: #FFFFFF;
		}
	}

	.coupon-list {
		.coupon-item {
			width: 690rpx;

			.quanItem {
				.arrow {
					width: 182rpx;
					height: 182rpx;
					background: linear-gradient(90deg, #dbf046 0%, #ffee7e 100%);
					border-radius: 20rpx;

					.tip {
						padding: 4rpx;
						width: fit-content;
						background: #333333;
						border-radius: 20rpx 8rpx 8rpx 8rpx;
					}
				}

				.right {
					width: 508rpx;
					height: 182rpx;
					background: #F8F8F8;
					border-radius: 20rpx;
					position: relative;

					.down-icon {
						width: 34rpx;
						height: 20;
					}

					.down-icon.active {
						transform: rotate(180deg);
					}

					.btn {
						width: 88rpx;
						height: 54rpx;
						background: #dbf046;
						border-radius: 20rpx;
					}

					.btnA {
						width: 112rpx;
						height: 54rpx;
						background: #333333;
						border-radius: 20rpx;
					}

					.btnA.disable {
						background: #F1F1F1;
						color: #999999;
					}

					.expire-icon {
						position: absolute;
						top: 10rpx;
						right: 10rpx;
						width: 96rpx;
						height: 86rpx;
					}
				}
			}

			.des {
				width: 690rpx;
				padding: 40rpx 20rpx 20rpx;
				box-sizing: border-box;
				background: linear-gradient(180deg, rgba(248, 248, 248, 0) 0%, #F8F8F8 100%);
				border-radius: 20rpx;
				font-size: 22rpx;
				color: #999999;
				margin-top: -20rpx;
				word-break: break-all;
			}
		}

		.coupon-item.is-del {
			display: flex;
			align-items: stretch;
			margin-left: -108rpx;

			.del-btn {
				width: 88rpx;
				background: #FFF3EC;
				border-radius: 20rpx;
				margin-left: 20rpx;
				flex-shrink: 0;
				font-size: 24rpx;
				color: #9C0000;
			}
		}
	}

	.productItem {
		width: 690rpx;
		background: #F8F8F8;
		border-radius: 40rpx;
		position: relative;

		.total {
			background: linear-gradient(90deg, #DBF046 0%, #FFEE7E 100%);
			border-radius: 34rpx;
			padding: 12rpx 20rpx;
			box-sizing: border-box;
		}

		.left {
			width: 142rpx;
			height: 174rpx;
		}

		.btnA {
			width: 112rpx;
			height: 54rpx;
			background: #333333;
			border-radius: 20rpx;
		}

		.btnA.disable {
			background: #F1F1F1;
			color: #999999;
		}

		.expire-icon {
			position: absolute;
			top: 10rpx;
			right: 10rpx;
			width: 96rpx;
			height: 86rpx;
		}

		.b {
			padding: 12rpx 20rpx;
			box-sizing: border-box;
			background: #F1F1F1;
			border-radius: 34rpx;

			.icon {
				width: 20rpx;
				height: 34rpx;
				flex-shrink: 0;
			}
		}
	}
</style>